<template>
  <el-card shadow="never">
    <div slot="header">页面设置</div>
    <el-form :model="formData" :rules="rules" ref="settingForm" label-width="90px">
      <el-form-item label="标题" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>



      <el-form-item label="文字颜色" prop="nameColor">
        <el-radio v-model="formData.nameColor" label="#ffffff">白色</el-radio>
        <el-radio v-model="formData.nameColor" label="#000000">黑色</el-radio>
      </el-form-item>

      <el-form-item label="顶部背景" prop="nameBackground">
        <el-color-picker v-model="formData.nameBackground"></el-color-picker>
      </el-form-item>

      <el-form-item label="列表标题" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>

      <el-form-item label="列表副标题" prop="subtitle">
        <el-input v-model="formData.subtitle"></el-input>
      </el-form-item>

      <el-form-item label="分享/封面" prop="image">
        <el-upload :action="uploadApi" list-type="picture-card" :auto-upload="true" :file-list="formData.shareImgList" name="upload" drag :limit="formConfig.uploadFile.limit" :on-success="onUploadChange" :on-exceed="onUploadExceed" :on-remove="onUploadRemove" :headers="uploadHeaders" :on-error="onUploadError" accept=".jpg,.png,.jpeg">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            分享和封面图片建议 750*600
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="二维码名片" prop="image">
        <el-upload :action="uploadApi" list-type="picture-card" :auto-upload="true" :file-list="formData.qrImgList" name="upload" drag :limit="formConfig.uploadFile.limit" :on-success="onUploadQrCodeChange" :on-exceed="onUploadExceed" :on-remove="onUploadRemove" :headers="uploadHeaders" :on-error="onUploadError" accept=".jpg,.png,.jpeg">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            二维码名片图片建议 750*1000
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="手机授权后提示语" prop="prompt">
        <el-input v-model="formData.prompt"></el-input>
      </el-form-item>
      <el-form-item label="是否开启" prop="status">
        <el-switch v-model="formData.status"> </el-switch>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import { getToken } from '@/utils/auth'
  const token = getToken()
  const Authorization = `Bearer ${token}`

  export default {
    name: 'PageSetting',
    filters: {},
    props: {
      formData: {
        type: Object,
        default: function () {
          return {}
        },
      },
      formConfig: {
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        uploadApi: `${process.env.VUE_APP_BASE_HOST}upload/cloud`,
        uploadHeaders: {
          Authorization,
        },
        rules: {
          name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        },
      }
    },
    watch: {},
    created() {},
    methods: {
      onUploadQrCodeChange(res) {
        const { url, filename } = res

        this.formData.qrImgList = url
        this.formData.qrImgList = [{ name: filename, url }]
      },
      // 文件上传添加
      onUploadChange(res) {
        const { url, filename } = res

        this.formData.shareImg = url
        this.formData.shareImgList = [{ name: filename, url }]
      },
      // 超出文件
      onUploadExceed() {
        this.$message({
          message: '抱歉，只能上传一张图片',
          type: 'error',
        })
      },
      // 移除
      onUploadRemove() {
        this.formData.shareImg = ''
        this.formData.shareImgList = []
      },
      async onUploadError(err) {
        if (err.status) {
          this.$message({
            message: '超时，请重新登录',
            type: 'error',
          })

          await this.$store.dispatch('user/logout')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          return
        }

        this.$message({
          message: '上传失败，请重试',
          type: 'error',
        })
      },
    },
  }
</script>
